<html>
  <head>
    <style type="text/css">
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        width : 60%;
        height: 50%;
        margin: 8px auto;
      }

	.test
	{
		background-color: #000;
		border-radius: 49px; 
		-moz-border-radius: 49px; 
		-webkit-border-radius: 49px; 
		border: 0px dashed #322980;
		height: 50px;
		width: auto;
		max-width: 250px;
	}
	.test .count
	{
		color: #fff;
		background-color: #888;
		height: 45px;
		width: 45px;
		border-radius: 22.5px; 
		-moz-border-radius: 22.5px; 
		-webkit-border-radius: 22.5px; 
		border: 2px solid #322980;
		position: relative;
		display: inline-block;
		top: - 5px;
	}

	.test .text
	{
		color: #fff;
		padding-top: 12px;
		overflow: hidden;
		position: relative;
		display: inline-block;
	}

    </style>
  </head>
  <body>
    <div id="container"></div>
    <!--[if IE]>
    <script type="text/javascript" src="/static/lib/FlashCanvas/bin/flashcanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="flotr2.min.js"></script>
    <script type="text/javascript">
	
	  (function basic_pie(container) {

			var s = new buffer();
			
		  var
			d1 = [[0, 4]],
			d2 = [[0, 3]],
			d3 = [[0, 1.03]],
			d4 = [[0, 3.5]],
			graph;
		  
		  graph = Flotr.draw(container, [
			{ data : d1, label : 'Comedy' },
			{ data : d2, label : 'Action' },
			{ data : d3, label : 'Romance',
			  pie : {
				explode : 50
			  }
			},
			{ data : d4, label : 'Drama' }
		  ], {
			HtmlText : false,
			grid : {
			  verticalLines : false,
			  horizontalLines : false
			},
			xaxis : { showLabels : false },
			yaxis : { showLabels : false },
			pie : {
			  show : true, 
			  explode : 6
			},
			mouse : { track : true },
			legend : {
			  position : 'se',
			  backgroundColor : '#D2E8FF'
			}
		  });
		})(document.getElementById("container"));
	  /*
      (function () {

        var
          container = document.getElementById('container'),
          start = (new Date).getTime(),
          data, graph, offset, i;

        // Draw a sine curve at time t
        function animate (t) {

          data = [];
          offset = 2 * Math.PI * (t - start) / 10000;

          // Sample the sine function
          for (i = 0; i < 4 * Math.PI; i += 0.2) {
            data.push([i, Math.sin(i - offset)]);
          }

          // Draw Graph
          graph = Flotr.draw(container, [ data ], {
            yaxis : {
              max : 2,
              min : -2
            }
          });

          // Animate
          setTimeout(function () {
            animate((new Date).getTime());
          }, 50);
        }

        animate(start);
      })();
	  */
    </script>
	<div class="test">
		<span class="count">10</span>
		<span class="text">Test</span>
	</div>
  </body>
</html>